<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>文件列表</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <style media="screen">
            .imglist{

            }
            .imglist img{
                width: 200px;
                height: 200px;
                margin: 12px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="imglist" id="imglist">

        </div>
    </body>
<script src="/static/store/cos/cos-js-sdk-v5.js"></script>
<script>
var Bucket = 'cq-1252015630';
var Region = 'ap-chongqing';
var filedomain = 'http://cos.xinxiaoyi.cn/';
// 初始化实例
var cos = new COS({
    getAuthorization: function (options, callback) {
        var url = 'https://i.fe80.cn/tools/sdk/sts.html';
        var xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);
        xhr.onload = function (e) {
            try {
                var data = JSON.parse(e.target.responseText);
            } catch (e) {
            }
            callback({
                TmpSecretId: data.credentials && data.credentials.tmpSecretId,
                TmpSecretKey: data.credentials && data.credentials.tmpSecretKey,
                XCosSecurityToken: data.credentials && data.credentials.sessionToken,
                ExpiredTime: data.expiredTime,
            });
        };
        xhr.send();
    }
});

function renderList(il){
    var d = document.getElementById('imglist');
    var _html = '';
    for (var i = 0; i < il.length; i++) {
        _html += '<img src="'+ filedomain + il[i].Key +'">';
    }
    console.log(_html);
    d.innerHTML = _html;
}

cos.getBucket({
    Bucket: Bucket,
    Region: Region,
    Prefix: 'images/', // 这里传入列出的文件前缀
    }, function (err, data) {
        console.log(err || data.Contents);
        if(data && data.Contents){
            renderList(data.Contents);
        }
    }
);

</script>

<script type="text/javascript" src="//mirror.fe80.cn/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://mirror.fe80.cn/viewerjs/1.10.1/viewer.min.css">
<script type="text/javascript" src="https://mirror.fe80.cn/viewerjs/1.10.1/viewer.min.js"></script>
<script type="text/javascript">
    // 打开窗口
    $('#imglist').on('click','img',function(){
        $("#imglist").viewer({"title":0});
    });
</script>
</html>
